import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
import axios from 'axios'
import Footer from '../compents/Footer'
import Header from '../compents/Header'
import style from '../css/Detail.module.css'
import { Icon } from 'antd'

class Xiang extends Component {

	constructor(props) {
		super(props);
		this.state = {
			display_name1: 'none',
			display_name2: 'block',
			display_name3: 'none',
			display_name4: 'none',
			display_name5: 'block',
			display_name6: 'none',
			display_name7: 'none',
			display_name8: 'none',
			display_name9: 'none',
			display_name10: 'none',
			detail: []
		}
	}
	display_name1() {
		if (this.state.display_name1 === 'none') {
			this.setState({
				display_name1: 'block',
			})
		} else if (this.state.display_name1 === 'block') {
			this.setState({
				display_name1: 'none',
			})

		}
	}
	display_name2() {
		if (this.state.display_name2 === 'none') {
			this.setState({
				display_name2: 'block',
			})
		} else if (this.state.display_name2 === 'block') {
			this.setState({
				display_name2: 'none',
			})

		}
	}
	display_name3() {
		if (this.state.display_name3 === 'none') {
			this.setState({
				display_name3: 'block',
			})
		} else if (this.state.display_name3 === 'block') {
			this.setState({
				display_name3: 'none',
			})

		}
	}
	display_name4() {
		if (this.state.display_name4 === 'none') {
			this.setState({
				display_name4: 'block',
			})
		} else if (this.state.display_name4 === 'block') {
			this.setState({
				display_name4: 'none',
			})

		}
	}
	display_name5() {
		if (this.state.display_name5 === 'none') {
			this.setState({
				display_name5: 'block',
			})
		} else if (this.state.display_name5 === 'block') {
			this.setState({
				display_name5: 'none',
			})

		}
	}
	display_name6() {
		if (this.state.display_name6 === 'none') {
			this.setState({
				display_name6: 'block',
			})
		} else if (this.state.display_name6 === 'block') {
			this.setState({
				display_name6: 'none',
			})

		}
	}
	display_name7() {
		if (this.state.display_name7 === 'none') {
			this.setState({
				display_name7: 'block',
			})
		} else if (this.state.display_name7 === 'block') {
			this.setState({
				display_name7: 'none',
			})

		}
	}
	display_name8() {
		if (this.state.display_name8 === 'none') {
			this.setState({
				display_name8: 'block',
			})
		} else if (this.state.display_name8 === 'block') {
			this.setState({
				display_name8: 'none',
			})

		}
	}
	display_name9() {
		if (this.state.display_name9 === 'none') {
			this.setState({
				display_name9: 'block',
			})
		} else if (this.state.display_name9 === 'block') {
			this.setState({
				display_name9: 'none',
			})

		}
	}
	display_name10() {
		if (this.state.display_name10 === 'none') {
			this.setState({
				display_name10: 'block',
			})
		} else if (this.state.display_name10 === 'block') {
			this.setState({
				display_name10: 'none',
			})

		}
	}
	render() {
		return (

			<div>
				<NavLink to={"/index"}>
					<Header />
				</NavLink>
				<div className={style.box01}>
					<div className={style.box1}>
						<div className={style.box1_shang}>
							<img src='http://img5.imgtn.bdimg.com/it/u=2297656164,1484026187&fm=26&gp=0.jpg' alt="" />

							<div className={style.box1_shang01}>
								<h3>上海, 中国</h3>
								<p>2019   年  09  月  27  日,周日,1  间  房,2  位  成  人><NavLink>显示最近搜索记录</NavLink></p>
							</div>
						</div>
						<div className={style.box1_xia}>
							<div className={style.box1_xia01}>
								<p>目的地,住宿或地标(中文/拼音/英文)</p>
								<input type='text' placeholder="上海，中国" />
							</div>
							<div className={style.box1_xia02}>
								<h3>入住</h3>
								<input type='text' placeholder="2019-09-27" />
								<p>星期日</p>
							</div>
							<div className={style.box1_xia03}>
								<h3>退房</h3>
								<input type='text' placeholder="2019-09-27" />
								<p>星期日</p>
							</div>
							<div className={style.box1_xia04}>
								<h3>成人</h3>
								<select name="">
									<option value="1">20</option>
									<option value="3">21</option>
									<option value="2">22</option>
								</select>
								<p>年满 18 岁</p>
							</div>
							<div className={style.box1_xia05}>
								<h3>儿童</h3>
								<select name="">
									<option value="0">8</option>
									<option value="3">9</option>
									<option value="2">10</option>
								</select>
								<p>0-17 岁</p>
							</div>
							<input type='button' name="" className={style.box1_an} value="搜索" />
						</div>
					</div>
				</div>
				<div className={style.box02}>
					<div className={style.box2}>
						<div className={style.box2_left}>
							<div className={style.left1}>
								<h3>缩小搜索范围:</h3>
								<h4>1529家酒店和度假短租房</h4>
							</div>
							<div className={style.left2}>
								<ul>
									<li>
										<h2 onClick={this.display_name1.bind(this)}><Icon type="down" />名称包含</h2>
										<ul style={{ display: this.state.display_name1 }}>
											<li> <NavLink> <input type='text' placeholder="住宿名称" /></NavLink></li>
										</ul>
									</li>
									<li>
										<h2 onClick={this.display_name2.bind(this)}><Icon type="down" />热门筛选条件</h2>
										<ul style={{ display: this.state.display_name2 }}>
											<li><input type="checkbox" /><NavLink>免费早餐</NavLink></li>
											<li><input type="checkbox" /><NavLink>游泳池</NavLink></li>
											<li><input type="checkbox" /><NavLink>免费wifi</NavLink></li>
											<li><input type="checkbox" /><NavLink>免费停车</NavLink></li>
											<li><input type="checkbox" /><NavLink>允许懈怠宠物</NavLink></li>
										</ul>
									</li>
									<li>
										<h2 onClick={this.display_name3.bind(this)}><Icon type="down" />平均每晚价格</h2>
										<ul style={{ display: this.state.display_name3 }}>
											<input type='text' placeholder="价格" />
										</ul>
									</li>
									<li>
										<h2 onClick={this.display_name4.bind(this)}><Icon type="down" />住宿评分</h2>
										<ul style={{ display: this.state.display_name4 }}>
											<li><input type="checkbox" /><NavLink>5分</NavLink></li>
											<li><input type="checkbox" /><NavLink>4分</NavLink></li>
											<li><input type="checkbox" /><NavLink>3分</NavLink></li>
											<li><input type="checkbox" /><NavLink>2分</NavLink></li>
											<li><input type="checkbox" /><NavLink>1分</NavLink></li>
										</ul>
									</li>
									<li>
										<h2 onClick={this.display_name5.bind(this)}><Icon type="down" />住客评分</h2>
										<ul style={{ display: this.state.display_name5 }}>
											<li><input type="checkbox" /><NavLink>5分</NavLink></li>
											<li><input type="checkbox" /><NavLink>4分</NavLink></li>
											<li><input type="checkbox" /><NavLink>3分</NavLink></li>
											<li><input type="checkbox" /><NavLink>2分</NavLink></li>
											<li><input type="checkbox" /><NavLink>1分</NavLink></li>
										</ul>
									</li>
									<li>
										<h2 onClick={this.display_name6.bind(this)}><Icon type="down" />付款和取消</h2>
										<ul style={{ display: this.state.display_name6 }}>
											<li><input type="checkbox" /><NavLink>免费取消</NavLink></li>
										</ul>
									</li>
									<li>
										<h2 onClick={this.display_name7.bind(this)}><Icon type="down" />Hotels.com好订网奖励</h2>
										<ul style={{ display: this.state.display_name7 }}>
											<li><input type="checkbox" /><NavLink>积累晚数</NavLink></li>
											<li><input type="checkbox" /><NavLink>兑换免费住宿</NavLink></li>

										</ul>
									</li>
									<li>
										<h2 onClick={this.display_name8.bind(this)}><Icon type="down" />街区</h2>
										<ul style={{ display: this.state.display_name8 }}>
											<li><input type="checkbox" /><NavLink>浦东</NavLink></li>
											<li><input type="checkbox" /><NavLink>虹桥</NavLink></li>
											<li><input type="checkbox" /><NavLink>静安区</NavLink></li>
											<li><input type="checkbox" /><NavLink>黄埔</NavLink></li>
											<li><input type="checkbox" /><NavLink>徐汇区</NavLink></li>
											<li><input type="checkbox" /><NavLink>陆家嘴</NavLink></li>
											<li><input type="checkbox" /><NavLink>闵行区</NavLink></li>
											<li><input type="checkbox" /><NavLink>松江区</NavLink></li>
											<li><input type="checkbox" /><NavLink>长宁区</NavLink></li>
											<li><input type="checkbox" /><NavLink>宝山区</NavLink></li>
										</ul>
									</li>
									<li>
										<h2 onClick={this.display_name9.bind(this)}><Icon type="down" />地标</h2>
										<ul style={{ display: this.state.display_name9 }}>
											<li><input type="checkbox" /><NavLink>市中心</NavLink></li>
											<li><input type="checkbox" /><NavLink>浦东国际机场</NavLink></li>
											<li><input type="checkbox" /><NavLink>人民广场站</NavLink></li>
											<li><input type="checkbox" /><NavLink>上海火车站</NavLink></li>
											<li><input type="checkbox" /><NavLink>南京东路站</NavLink></li>
										</ul>
									</li>
									<li>
										<h2 onClick={this.display_name10.bind(this)}><Icon type="down" />住宿类型</h2>
										<ul style={{ display: this.state.display_name10 }}>
											<li><input type="checkbox" /><NavLink>别墅</NavLink></li>
											<li><input type="checkbox" /><NavLink>宾馆</NavLink></li>
											<li><input type="checkbox" /><NavLink>度假区</NavLink></li>
											<li><input type="checkbox" /><NavLink>公寓</NavLink></li>
											<li><input type="checkbox" /><NavLink>酒店</NavLink></li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
						<div id='zhan' className={style.box2_right}>
							<ul className={style.box2_rightul}>
								<li>排序条件</li>
								<li>主推</li>
								<li>住宿高分</li>
								<li>位置</li>
								<li>住客评分</li>
								<li>价格</li>
							</ul>
							<div className={style.deng}>在您旅行期间，40% 的房间已经订出。别等到最后一刻，现在就订好住宿。</div>

							{this.state.detail.map((item, i) => {
								return (
									<NavLink to={{ pathname: '/detail/=' + item.pid }}>
										<div key={i} className={style.lie} onClick={this.tiao.bind(this, i, item)} >
											<NavLink><h2> {item.pname}</h2></NavLink>
											<p>现在订好住宿,即可享超值大礼包</p>
											<div id='pin' className={style.pinjie}>
												<img src={item.pimg} alt="" />
												<div className={style.lie1}>
													<p>4分(高档)</p>
													<p><Icon type='bank' style={{ color: '#156BC1', fontSize: '16px' }} /> 宝山区</p>
													<p>{item.pdesc}</p>
													<p>价格:{item.pprice}</p>
													<p><Icon type='pie-chart' style={{ color: '#7b1fa2', fontSize: '16px' }} />累计晚数</p>
												</div>

											</div>
										</div>
									</NavLink>)
							})}

						</div>
					</div>
				</div>
				<Footer />
			</div>
		)

	}
	tiao(i, item) {
		console.log(item)

	}

	componentDidMount() {
		axios({
			url: 'http://jx.xuzhixiang.top/ap/api/allproductlist.php',
			params: { uid: 7270 }
		}).then((data) => {
			// console.log(data)
			this.setState({ detail: data.data.data })
		})
	}

}


export default Xiang;